<template>
  <div>
    <el-table ref="messageTable" :data="messageList" @row-click="read" stripe highlight-current-row>
      <el-table-column>
        <template #header>
          <el-tabs v-model="messageType">
            <el-tab-pane label="全部" :name="filterType.all"></el-tab-pane>
            <el-tab-pane label="未读" :name="filterType.unread"></el-tab-pane>
            <el-tab-pane label="已读" :name="filterType.read"></el-tab-pane>
          </el-tabs>
          <el-button @click="readAll" v-show="messageType !== filterType.read">
            全部已读
          </el-button>
        </template>
        <template slot-scope="scope">
          <div class="messageTitle" :style="{color: levelColor[scope.row.level]}">
            <i v-show="!scope.row.hasRead" class="el-icon-hongdian redPoint"></i>
            {{ scope.row.title }}
          </div>
          <div class="messageContent">{{ scope.row.content }}</div>
          <div class="messageTime">{{ scope.row.createdTime }}</div>
          <el-button type="text" @click="$router.push({path: '/record', query: {id: scope.row.inspectionId}})">查看检查记录</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {defineComponent} from 'vue'
import MessageFilterType from "@/utils/constants/MessageFilterType";
import UrgentLevelColor from "@/utils/constants/UrgentLevelColor";

export default defineComponent({
  name: "Message",
  data() {
    return {
      levelColor: UrgentLevelColor,
      filterType: MessageFilterType,
      messageType: MessageFilterType.all,
      messageList: [
        {
          id: 1,
          inspectionId: 0,
          createdTime: '2025-02-02',
          title: '消息111111111111111111111111111111111111111111111111111',
          content: '1111111111111111111111111111',
          level: 0,
          hasRead: false,
        },
        {
          id: 2,
          createdTime: '2025-02-02',
          inspectionId: 2,
          title: '2222222222222222222222222',
          content: '22222222222222222222222222222',
          level: 2,
          hasRead: true,
        },
        {
          id: 3,
          createdTime: '2025-02-02',
          inspectionId: 2,
          title: '2222222222222222222222222',
          content: '22222222222222222222222222222',
          level: 2,
          hasRead: true,
        },
        {
          id: 4,
          createdTime: '2025-02-02',
          inspectionId: 2,
          title: '2222222222222222222222222',
          content: '22222222222222222222222222222',
          level: 2,
          hasRead: true,
        },
        {
          id: 5,
          createdTime: '2025-02-02',
          inspectionId: 2,
          title: '2222222222222222222222222',
          content: '22222222222222222222222222222',
          level: 2,
          hasRead: true,
        },
      ],
    }
  },
  mounted() {
    this.getMessageList()
  },
  methods: {
    //全部已读
    readAll() {
      this.$request.put('/message/readAll').then(res => {
        if (res.code === 200) {
          this.$message.success('全部已读')
          this.getMessageList()
          this.$emit('update:user')
        }
      })
    },
    //标记已读
    read(row) {
      const id = row.id
      if (row.hasRead) return
      this.$request.put('/message/read/' + id).then(res => {
        if (res.code === 200) {
          this.getMessageList()
          this.$emit('update:user')
        }
      })
    },
    //获取数据
    getMessageList() {
      this.$request.get('/message/list/' + this.messageType).then(res => {
        this.messageList = res.data
        this.scrollToTheMessageRow()
      })
    },
    //若是点击某个消息而跳转，则滚动到这个消息
    scrollToTheMessageRow() {
      const id = Number(this.$route.query.id) || 0
      if (id === 0) return
      this.$route.query.id = 0
      const rowData = this.messageList.find(item => item.id === id)
      const index = this.messageList.findIndex(item => item.id === id)
      this.$refs.messageTable.setCurrentRow(rowData)
      // 确保在 DOM 更新后调用滚动
      this.$nextTick(() => {
        if (this.$refs.messageTable) {
          //通过css选择器寻找类名为el-table__body-wrapper的元素，这是 Element UI 表格的滚动容器
          const tableBody = this.$refs.messageTable.$el.querySelector(".el-table__body-wrapper");
          if (tableBody) {
            // 通过css选择器寻找类名为el-table__row的元素列表，这是 Element UI 表格的行元素，并通过索引取得指定行
            const row = tableBody.querySelectorAll(".el-table__row")[index]
            if (row) {
              //将对应的行元素滚动到可视区域内，要平滑
              row.scrollIntoView({behavior: "smooth"})
            }
          }
        }
      })
    }
  },
  watch: {
    //监控messageType的变化，请求后端获取消息列表
    messageType() {
      this.getMessageList()
    }
  },
})
</script>

<style scoped>
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: #eff5ff;
}

.messageTitle {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.messageContent {
  white-space: pre;
  font-size: 0.9rem;
}

.redPoint {
  color: red;
}

.messageTime {
  margin-top: 0.5em;
}
</style>
